<!DOCTYPE html>
<html lang="en">
<head th:include="aHomeProducts/include :: header"></head>
<body>

<style>
    #app{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background-image: url("/img/loginBackground.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-right: 15%;
        width: 85%;

    }
    .myform{
        height: 300px;
        width: 360px;
        background-color: #FFFFFF;
        padding: 20px;
        border-radius: 10px;
    }
    .myform-title{
        text-align: center;
    }
    .myform-button{
        width: 100%;
    }
    .el-form-item__label{
        font-size: 1rem;
        color: black;
        font-weight: bold;
    }
    .el-form-item__label::before{
        content: ''!important;
    }
</style>
<div id="app" >
    <el-form class="myform" ref="form" label-position="top" :model="form" :rules="rules" >
        <el-form-item>
            <h1 class="myform-title" style="font-size: 1.5rem;">账号 <span style="font-size: 2rem;color: #FF5353">登录</span></h1>
        </el-form-item>
        <el-form-item prop="username"  label="用户名称">
            <el-input
                    placeholder="请输入用户名称"
                    prefix-icon="el-icon-user-solid"
                    v-model="form.username">
            </el-input>
        </el-form-item>

        <el-form-item prop="password" label="登录密码">
            <el-input
                    placeholder="请输入登录密码"
                    prefix-icon="el-icon-lock"
                    type="password"
                    show-password
                    v-model="form.password">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button class="myform-button" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
    </el-form>

</div>
<div th:include="aHomeProducts/include :: footer"></div>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password:''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' }
                ],
            }
        },
        methods: {
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        console.log('登录',this.form)
                        console.log('axiosaxios',axios)
                        axios.post("/login", this.form).then(function (response) {
                            if(response.data.code=='0'){
                                parent.location.href = '/index';
                                localStorage.clear()
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>
